<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>在线客服</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
		<script src="//at.alicdn.com/t/font_577691_cbd5g1lsegzdj9k9.js"></script>
		<style type="text/css">
			.touxiang{width:10vw;height:10vw;border-radius: 4px;margin: 2vw;background-size: 30px;}
			.chatItem{margin-top: 10px;}
			.chatItem .content{background: white;border-radius:8px;padding: 10px;width: 65vw;text-align: left;word-break:break-all;}
			.fromchatItem .content{margin-left: 14vw;}
			.sendMyMessage .content {margin-left:21vw;}
			.fromchatItem .date{color:blue}
			.tochatItem .content{margin-left: 21vw;}
			.tochatItem .date{color:#008242}
			* {
				font-size:14px;
			}
			    .icon {
			       width: 1em; height: 1em;
			       vertical-align: -0.15em;
			       fill: currentColor;
			       overflow: hidden;
			    }
			    p {
			    	margin:0;
			    }
			.sendMyMessage > div > p {
				text-align: right;
			}			    
			    .tochatItem .date {
			    	margin-left:38vw;
			    }
			    .fromchatItem .date {
			    	margin-left:0;
			    }
			#content-chat  {
				overflow: scroll;
				-webkit-overflow-scrolling : touch;
				position: relative;
/* 				z-index:20000; */
				z-index:1;
			}
			
			.ke-container-default {
				max-width:100vw;
			}
			.ke-statusbar {
				display: none;
			}
			.w-e-text-container {
				height:60px!important;
			}
 			.w-e-text-container .w-e-panel-container {
				/* top:-520%; */
				width: 80vw!important;
			}
			.w-e-panel-tab-content {
				height:150px!important;
			}
/* 			.w-e-text-container {
				position: static;
			} */
			.sendMyMessage img {
				float:right;
			}
			.sendMyMessage 
			.sendMyMessage > div {
				margin-left:20vw !important;
			}
			.sendMyMessage > span {
				margin-left:20vw !important;
				flex-direction: row-reverse;
			}			
			.w-e-panel-container {
/* 			    top: -40px!important; */
			    margin-left:0!important;
			}
			.w-e-toolbar {
				height:40px!important;
			}
			.glyphicon-send {
				/* height:50px!important; */
			display: flex;
			    align-items: center;
			    justify-content: center;
			}
			.w-e-menu {
				display:flex;
				align-items:center;
			}
			.w-e-text {
				background-color:white;
			}
			#content-chat svg {
				width: 30px!important;
				height: 30px!important;
				vertical-align:top!important;
			}
			.clearfix:after {
				content:"";
				display:block;
				clear:both;
			}
			#div22 {
				float:left;
			}
			.w-e-toolbar {
				border: 1px solid rgb(204, 204, 204);
				background-color: rgb(236, 236, 236)
			}
			.date {
				display:inline-flex;
				width: 65vw;
				justify-content:space-between;
			}
		</style>
	</head>
	<body style="background: #DFDFDF;" >
 		<div id="div-i-main" class="" style="width:100%;position: relative;">
			<div id="header" style="display:flex;justify-content:space-between;align-items:center;padding:2vh;background-color:rgb(51,122,183);width:100%;">
				<a onclick="back()" class="glyphicon glyphicon-chevron-left" style="color: white;font-size: 3.5vh;"></a>
				<strong style="font-size: 3.5vh;color:white;">
				<span id="span-i-customServiceStatus" style="font-size:3.5vh;">在线群聊</span></strong>
				<a onclick="closeWebSocket()" class="glyphicon glyphicon-off" style="color: white;font-size: 3.5vh;"></a>		
			</div>
			<div id="content-chat" style="">
			</div>
<!-- 			<div id="footer" style="bottom:0;position: fixed;">
				<textarea id="chat-textarea" class="textarea" 
				 rows="3" cols=""
				 style="resize: none;
				 overflow:visible;
				 min-height:36px;
				 border:0;
				 border-right:1px solid silver; 
				 padding:8px 8px 0 8px;
				 outline: none;">
				 </textarea>
			</div> -->
			<div class="sendMessageWrapper">
				<div class="editarea-wrapper editarea-wrapper-active">
					<svg class="icon" id="svg-i-toggleExtraTool" aria-hidden="true">
					    <use xlink:href="#icon-27CIRCLE"></use>
					</svg>	
					<div contenteditable="true" class="div-c-editArea">
					</div>
						<span class="span-c-sendNewMessage">发送</span>
				</div>
				<div class="div-c-extraTool">
					<svg class="icon w-e-menu" id="svg-i-toggleEMOJITool" aria-hidden="true">
					    <use xlink:href="#icon-smile"></use>
					</svg>
					<div class="w-e-panel-container" contenteditable=false style="width:300px; margin-left:-150px;">
						<!-- <i class="w-e-icon-close w-e-panel-close"></i> -->
						<ul class="w-e-panel-tab-title">
						<li data-index="1" class="w-e-item w-e-active">默认</li>
						<li data-index="2" class="w-e-item">新浪</li>
						<li data-index="3" class="w-e-item">emoji</li>
						</ul>
						<div class="w-e-panel-tab-content" style="height:200px; overflow-y:auto;">
						<div class="w-e-emoticon-container w-e-emoticon-container-active" id="w-e-emoticon-container1"><span class="w-e-item">
						<img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png" alt="[坏笑]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png" alt="[舔屏]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/pcmoren_wu_org.png" alt="[污]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/2c/moren_yunbei_org.png" alt="[允悲]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3a/moren_xiaoerbuyu_org.png" alt="[笑而不语]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/moren_feijie_org.png" alt="[费解]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/37/moren_chongjing_org.png" alt="[憧憬]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/fc/moren_bbjdnew_org.png" alt="[并不简单]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/huanglianwx_org.gif" alt="[微笑]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8a/pcmoren_cool2017_org.png" alt="[酷]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/tootha_org.gif" alt="[嘻嘻]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6a/laugh.gif" alt="[哈哈]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/14/tza_org.gif" alt="[可爱]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/kl_org.gif" alt="[可怜]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/wabi_org.gif" alt="[挖鼻]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/f4/cj_org.gif" alt="[吃惊]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/shamea_org.gif" alt="[害羞]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/c3/zy_org.gif" alt="[挤眼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/29/bz_org.gif" alt="[闭嘴]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/71/bs2_org.gif" alt="[鄙视]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/lovea_org.gif" alt="[爱你]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9d/sada_org.gif" alt="[泪]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/19/heia_org.gif" alt="[偷笑]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8f/qq_org.gif" alt="[亲亲]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/b6/sb_org.gif" alt="[生病]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/58/mb_org.gif" alt="[太开心]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/landeln_org.gif" alt="[白眼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/98/yhh_org.gif" alt="[右哼哼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/zhh_org.gif" alt="[左哼哼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/a6/x_org.gif" alt="[嘘]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/cry.gif" alt="[衰]" data-w-e="1"></span></div><div id="w-e-emoticon-container2" class="w-e-emoticon-container" style="display:none;"><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif" alt="[草泥马]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif" alt="[神马]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif" alt="[浮云]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_thumb.gif" alt="[给力]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f2/wg_thumb.gif" alt="[围观]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/vw_thumb.gif" alt="[威武]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/panda_thumb.gif" alt="[熊猫]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/81/rabbit_thumb.gif" alt="[兔子]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/otm_thumb.gif" alt="[奥特曼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif" alt="[囧]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif" alt="[互粉]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c4/liwu_thumb.gif" alt="[礼物]" data-w-e="1"></span></div><div id="w-e-emoticon-container3" class="w-e-emoticon-container" style="display:none;"><span class="w-e-item">😀</span><span class="w-e-item">😃</span><span class="w-e-item">😄</span><span class="w-e-item">😁</span><span class="w-e-item">😆</span><span class="w-e-item">😅</span><span class="w-e-item">😂</span><span class="w-e-item">😊</span><span class="w-e-item">😇</span><span class="w-e-item">🙂</span><span class="w-e-item">🙃</span><span class="w-e-item">😉</span><span class="w-e-item">😌</span><span class="w-e-item">😍</span><span class="w-e-item">😘</span><span class="w-e-item">😗</span><span class="w-e-item">😙</span><span class="w-e-item">😚</span><span class="w-e-item">😋</span><span class="w-e-item">😜</span><span class="w-e-item">😝</span><span class="w-e-item">😛</span><span class="w-e-item">🤑</span><span class="w-e-item">🤗</span><span class="w-e-item">🤓</span><span class="w-e-item">😎</span><span class="w-e-item">😏</span><span class="w-e-item">😒</span><span class="w-e-item">😞</span><span class="w-e-item">😔</span><span class="w-e-item">😟</span><span class="w-e-item">😕</span><span class="w-e-item">🙁</span><span class="w-e-item">😣</span><span class="w-e-item">😖</span><span class="w-e-item">😫</span><span class="w-e-item">😩</span><span class="w-e-item">😤</span><span class="w-e-item">😠</span><span class="w-e-item">😡</span><span class="w-e-item">😶</span><span class="w-e-item">😐</span><span class="w-e-item">😑</span><span class="w-e-item">😯</span><span class="w-e-item">😦</span><span class="w-e-item">😧</span><span class="w-e-item">😮</span><span class="w-e-item">😲</span><span class="w-e-item">😵</span><span class="w-e-item">😳</span><span class="w-e-item">😱</span><span class="w-e-item">😨</span><span class="w-e-item">😰</span><span class="w-e-item">😢</span><span class="w-e-item">😥</span><span class="w-e-item">😭</span><span class="w-e-item">😓</span><span class="w-e-item">😪</span><span class="w-e-item">😴</span><span class="w-e-item">🙄</span><span class="w-e-item">🤔</span><span class="w-e-item">😬</span><span class="w-e-item">🤐</span>
						</div></div></div>						
				</div>					
			</div>
<!-- 			<div id="div-i-footer" class="clearfix" style="width:100%;z-index:3;position: relative;">
				<div id="div1" class="toolbar">
					<div class="w-e-menu" style="z-index:10001;">
					    <i class="w-e-icon-happy"></i></div>	
						<div class="w-e-panel-container" contenteditable=false style="width:300px; margin-left:-150px;">
					<i class="w-e-icon-close w-e-panel-close"></i>
					<ul class="w-e-panel-tab-title">
					<li data-index="1" class="w-e-item w-e-active">默认</li>
					<li data-index="2" class="w-e-item">新浪</li>
					<li data-index="3" class="w-e-item">emoji</li>
					</ul>
					<div class="w-e-panel-tab-content" style="height:200px; overflow-y:auto;">
					<div class="w-e-emoticon-container w-e-emoticon-container-active" id="w-e-emoticon-container1"><span class="w-e-item">
					<img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png" alt="[坏笑]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png" alt="[舔屏]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/pcmoren_wu_org.png" alt="[污]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/2c/moren_yunbei_org.png" alt="[允悲]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3a/moren_xiaoerbuyu_org.png" alt="[笑而不语]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/moren_feijie_org.png" alt="[费解]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/37/moren_chongjing_org.png" alt="[憧憬]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/fc/moren_bbjdnew_org.png" alt="[并不简单]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/huanglianwx_org.gif" alt="[微笑]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8a/pcmoren_cool2017_org.png" alt="[酷]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/tootha_org.gif" alt="[嘻嘻]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6a/laugh.gif" alt="[哈哈]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/14/tza_org.gif" alt="[可爱]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/kl_org.gif" alt="[可怜]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/wabi_org.gif" alt="[挖鼻]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/f4/cj_org.gif" alt="[吃惊]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/shamea_org.gif" alt="[害羞]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/c3/zy_org.gif" alt="[挤眼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/29/bz_org.gif" alt="[闭嘴]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/71/bs2_org.gif" alt="[鄙视]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/lovea_org.gif" alt="[爱你]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9d/sada_org.gif" alt="[泪]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/19/heia_org.gif" alt="[偷笑]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8f/qq_org.gif" alt="[亲亲]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/b6/sb_org.gif" alt="[生病]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/58/mb_org.gif" alt="[太开心]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/landeln_org.gif" alt="[白眼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/98/yhh_org.gif" alt="[右哼哼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/zhh_org.gif" alt="[左哼哼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/a6/x_org.gif" alt="[嘘]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/cry.gif" alt="[衰]" data-w-e="1"></span></div><div id="w-e-emoticon-container2" class="w-e-emoticon-container" style="display:none;"><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif" alt="[草泥马]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif" alt="[神马]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif" alt="[浮云]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_thumb.gif" alt="[给力]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f2/wg_thumb.gif" alt="[围观]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/vw_thumb.gif" alt="[威武]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/panda_thumb.gif" alt="[熊猫]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/81/rabbit_thumb.gif" alt="[兔子]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/otm_thumb.gif" alt="[奥特曼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif" alt="[囧]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif" alt="[互粉]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c4/liwu_thumb.gif" alt="[礼物]" data-w-e="1"></span></div><div id="w-e-emoticon-container3" class="w-e-emoticon-container" style="display:none;"><span class="w-e-item">😀</span><span class="w-e-item">😃</span><span class="w-e-item">😄</span><span class="w-e-item">😁</span><span class="w-e-item">😆</span><span class="w-e-item">😅</span><span class="w-e-item">😂</span><span class="w-e-item">😊</span><span class="w-e-item">😇</span><span class="w-e-item">🙂</span><span class="w-e-item">🙃</span><span class="w-e-item">😉</span><span class="w-e-item">😌</span><span class="w-e-item">😍</span><span class="w-e-item">😘</span><span class="w-e-item">😗</span><span class="w-e-item">😙</span><span class="w-e-item">😚</span><span class="w-e-item">😋</span><span class="w-e-item">😜</span><span class="w-e-item">😝</span><span class="w-e-item">😛</span><span class="w-e-item">🤑</span><span class="w-e-item">🤗</span><span class="w-e-item">🤓</span><span class="w-e-item">😎</span><span class="w-e-item">😏</span><span class="w-e-item">😒</span><span class="w-e-item">😞</span><span class="w-e-item">😔</span><span class="w-e-item">😟</span><span class="w-e-item">😕</span><span class="w-e-item">🙁</span><span class="w-e-item">😣</span><span class="w-e-item">😖</span><span class="w-e-item">😫</span><span class="w-e-item">😩</span><span class="w-e-item">😤</span><span class="w-e-item">😠</span><span class="w-e-item">😡</span><span class="w-e-item">😶</span><span class="w-e-item">😐</span><span class="w-e-item">😑</span><span class="w-e-item">😯</span><span class="w-e-item">😦</span><span class="w-e-item">😧</span><span class="w-e-item">😮</span><span class="w-e-item">😲</span><span class="w-e-item">😵</span><span class="w-e-item">😳</span><span class="w-e-item">😱</span><span class="w-e-item">😨</span><span class="w-e-item">😰</span><span class="w-e-item">😢</span><span class="w-e-item">😥</span><span class="w-e-item">😭</span><span class="w-e-item">😓</span><span class="w-e-item">😪</span><span class="w-e-item">😴</span><span class="w-e-item">🙄</span><span class="w-e-item">🤔</span><span class="w-e-item">😬</span><span class="w-e-item">🤐</span>
					</div></div></div>						    
    			</div>
				<div id="div22" style="width:80%;">
				</div>
				<a id="a-i-sendMessage" class="" style="height:60px;float:right;width:20%;display:flex;justify-content:center;align-items:center;background-color:rgb(51,122,183);padding:1vh;color: white;font-size: 2.6vh;" ontouchend="send()">发送</a>
			 </div> -->
		</div>
		<%--  <div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center bg-primary" style="height: 50px;line-height:50px;position: fixed;margin-top: 0px;left: 0px;z-index: 100;">
			<a onclick="back()" class="glyphicon glyphicon-chevron-left fl" style="color: white;margin-top: 13px;font-size: 20px;"></a>
			<strong style="font-size: 20px;">在线客服</strong>
			<a onclick="closeWebSocket()" class="glyphicon glyphicon-off fr" style="color: white;margin-top: 13px;font-size: 20px;"></a>
		</div>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center" style="padding: 0;">
			<div style="height: 50px;"></div>
			<div class="chatList" style="height: 80vh;overflow:auto;">
				<div style="height: 80px;" class="zhanwei"></div>
			</div>
			<div style="position: fixed;bottom:0;left:0;width:100%;height: 80px;background: white;border:1px solid silver;">
				<!-- <span class="glyphicon glyphicon-plus-sign fl" style="color: gray;font-size: 7vw;margin-left: 1vw;margin-top: 1vw;"></span> -->
				<textarea id="chat-textarea" class="textarea" rows="3" cols="" style="resize: none;overflow:visible;width: 86.5vw;min-height:36px;border:0;border-right:1px solid silver; margin-top: 0.2vw;padding:8px 8px 0 8px ;outline: none;"></textarea>
				<a class="glyphicon glyphicon-send fr" style="color: gray;font-size: 7vw;margin-right: 3vw;margin-top: 20px;" onclick="send()"></a>
			</div>
		</div> --%>
		<audio id="audioPlay" src="/cp/music/MessageSending.mp3"></audio>
		<script src="/kindeditor/kindeditor-all-min.js"></script>
	</body>
	
	<script type="text/javascript">
	var USER_AVATER_OBJECT = {
			"0": {
				name: "系统",
				avatar: "img/service.png"
			}
	}
/* 	var E = window.wangEditor
	var editor = new E('#div1', '#div22')
    editor.customConfig.menus = [
 
           ]	
	editor.create() */
	bindEditContentEvent(function() {
		setContentHeight()
	})
 		var setContentHeight = function() {
 			var allHeight = $(document).height()
 			document.querySelector("#div-i-main").style.height = allHeight + "px"
			var headerHeight = document.querySelector("#header").clientHeight
			var footer = document.querySelector(".sendMessageWrapper").clientHeight
			var restHeight = allHeight - headerHeight - footer
			var chatDiv = document.querySelector("#content-chat")
			chatDiv.style.height = restHeight + "px"
		}
/* 		KindEditor.ready(function(K) {
			window.editor = K.create('#chat-textarea', {
				   width: document.documentElement.clientWidth + "px",
				   height: document.documentElement.clientHeight * 0.2 + "px",
	               resizeType : 0,  
	               allowPreviewEmoticons : false,  
	               allowImageUpload : false,  
	               items : [ 'emoticons'],
	               afterBlur:function(){this.sync();}
	           });  
		}); */
		var websocket = null;
		var url=window.location.href.replace("chat/chatAll.do","all").replace("http","ws")
		//判断当前浏览器是否支持WebSocket
		if ('WebSocket' in window) {
			websocket = new WebSocket(url+"?name=${user.id }");
		} else {
			alert('Not support websocket');
		};
	
		//连接发生错误的回调方法
		websocket.onerror = function() {
			setMessageInnerHTML("error");
		};
	
		//连接成功建立的回调方法
		/* websocket.onopen = function(event){
		  setMessageInnerHTML("open");
		}; */
	
		//接收到消息的回调方法
		websocket.onmessage = function(event) {
			setMessageInnerHTML(event.data)
		};
	
		//连接关闭的回调方法
		websocket.onclose = function() {
			setMessageInnerHTML("断开连接，对方将不再收到你的消息");
		};
	
		//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
		window.onbeforeunload = function() {
			websocket.close();
		};
		$("body").click(function(){
			var audio = document.getElementById( "audioPlay" );
		    audio.play();
		})
		//将消息显示在网页上
		var upDateNewMessage = function(obj, mess) {
			$("#content-chat").append("<div class='fromchatItem chatItem'><span class='date'><span>" + obj.name + "</span><span>" + date() + "</span></span><img class='touxiang fl' src='/cp/" + obj.avatar + "'></img>"
					+"<div class='content'>" + decodeURIComponent(decodeURIComponent(mess))
					+"</div></div>")
			$('#content-chat').scrollTop($('#content-chat')[0].scrollHeight);			
		}
		
		function setMessageInnerHTML(message) {
			var audio = document.getElementById( "audioPlay" );
		    audio.play();
			var mess = message.split("k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90u");
			var id = mess[1]
			if (USER_AVATER_OBJECT[id] == undefined) {
				var urlPath = "getUserById.do"
				var newRequest = {
					url: urlPath,
					type: "post",
					data: {
						id: id
					},
					success: function(data) {
						var newData = JSON.parse(data)
						upDateNewMessage(newData.data, mess[0])
						var newOBJ = {
							name: newData.data.name,
							avatar: newData.data.avatar
						}
						USER_AVATER_OBJECT[newData.data.id] = newOBJ
					},
					error: function(status) {
						
					}
				}
				ajax(newRequest)				
			} else {
				upDateNewMessage(USER_AVATER_OBJECT[id], mess[0])
			}
		};

		//关闭连接
		function closeWebSocket() {
			websocket.close();
		};
		//发送消息
		
	function send() {
		var messageValue = $(".div-c-editArea").html().trim()
		if (messageValue == "") {
			return
		}
		var message = "${user.id }" + "k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90uallk45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90u"+ messageValue
		websocket.send(encodeURIComponent(encodeURIComponent(message)));
		$("#content-chat").append("<div class='fromchatItem chatItem sendMyMessage'><span style='color: #008242;' class='date'><span>${user.name}</span><span>" + date() + "</span></span><img class='touxiang fl' src='/cp/${user.avatar }'></img>"
				+"<div class='content'>"+ messageValue
				+"</div></div>")
		$(".div-c-editArea").html("")
		$('#content-chat').scrollTop($('#content-chat')[0].scrollHeight);
		$(".div-c-editArea")[0].blur()
		$(".div-c-extraTool-active").removeClass("div-c-extraTool-active")
		$(".w-e-panel-container-active").removeClass("w-e-panel-container-active")
		$(".editarea-wrapper").addClass("editarea-wrapper-active")
			//$('#content-chat').scrollTop( $('#content-chat')[0].scrollHeight+"px" );
	};
		/* 补0 */
		function checkTime(i) {
			if (i < 10) {
				i = "0" + i;
			}
			return i;
		}
		function date() {
			var today = new Date;
			var y = checkTime(today.getFullYear());
			var mm = checkTime(today.getMonth() + 1);
			var d = checkTime(today.getDate());
			var h = checkTime(today.getHours());
			var m = checkTime(today.getMinutes());
			var s = checkTime(today.getSeconds());
			//y = y + '-' + mm + '-' + d + ' ' + h + ':' + m + ':' + s;
			y = h + ':' + m + ':' + s;
			return y;
		}
	   window.onload=function () {  
	        document.addEventListener('touchstart',function (event) {  
	            if(event.touches.length>1){  
	                event.preventDefault();  
	            }  
	        })  
	        var lastTouchEnd=0;  
	        document.addEventListener('touchend',function (event) {  
	            var now=(new Date()).getTime();  
	            if(now-lastTouchEnd<=200){  
	                event.preventDefault();  
	            }  
	            lastTouchEnd=now;  
	        },false)  
	  		}
		setContentHeight()
		$(".span-c-sendNewMessage").on("touchend", function(event) {
			send()
		})
		</script>
</html>